<template>
	<el-container style="height: 100%;">
		<el-aside width="200px">

			<div class="left-top">
				<img class="mini-logo" src="../assets/logo_min.png" />
				<span>熊猫电影管理后台</span>
			</div>

			<el-menu router style="border: 1px solid #0891F9 " text-color="#fff" theme="light"
				:default-active="$route.path">
				<el-submenu index="1" style="width: 100%; overflow: hidden;">
					<template #title><i class="el-icon-film" style="color: white;"></i>电影管理</template>
					<el-menu-item index="/movies/create">新建电影</el-menu-item>
					<el-menu-item index="/movies/list">电影列表</el-menu-item>
					<el-menu-item index="/banners/create">新建轮播</el-menu-item>
					<el-menu-item index="/banners/list">轮播列表</el-menu-item>
					<el-menu-item index="/trailers/create">新建预告</el-menu-item>
					<el-menu-item index="/trailers/list">预告列表</el-menu-item>
				</el-submenu>

				<el-submenu index="2" style="width: 100%; overflow: hidden;">
					<template #title><i class="el-icon-user" style="color: white;"></i>用户管理</template>
					<el-menu-item index="/user/list">用户列表</el-menu-item>
				</el-submenu>
				<el-submenu index="3" style="width: 100%; overflow: hidden;">
					<template #title><i class="el-icon-s-comment" style="color: white;"></i>评论管理</template>
					<el-menu-item index="/comment/list">所有评论</el-menu-item>
				</el-submenu>
				<el-submenu index="4" style="width: 100%; overflow: hidden;">
					<template #title><i class="el-icon-message" style="color: white;"></i>消息管理</template>
					<el-menu-item index="/message/noticepost">发布公告</el-menu-item>
					<el-menu-item index="/message/notice">公告列表</el-menu-item>
					<el-menu-item index="/message/user">用户反馈</el-menu-item>
				</el-submenu>

			</el-menu>
		</el-aside>

		<el-container>
			<el-header>
				<el-dropdown @command="handleCommand">
					<i class="el-icon-setting" style="margin-right: 15px;color: #333;"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="a">管理中心</el-dropdown-item>
						<el-dropdown-item command="b">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>小菠萝</span>
			</el-header>

			<el-main style="margin: 1px; background-color: #f5f5f5; padding: 0px;">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {};
		},
		mounted() {
			let mytoken = localStorage.getItem("mytoken");
			if (!mytoken || mytoken.length < 10) {
				this.$router.replace({
					path: '/login'
				})
				return;
			}

			console.log(this.$route.path);
			if (this.$route.path === '/') {
				this.$router.push({
					path: '/movies/list'
				})
				return;
			}
		},
		methods: {
			handleCommand(command) {
				// this.$message('click on item ' + command);
				if (command === 'b') {
					localStorage.setItem('mytoken', '0')
					this.$router.replace({
						path: '/login'
					})
				}
			}
		}
	};
</script>

<style>
	.el-header {
		/* background-color: #3a9fe6; */
		color: #333;
		line-height: 60px;
		text-align: right;
		font-size: 12px;
		box-shadow: 0px 1px 2px #ddd;
	}

	.el-aside {
		background-color: #3a9fe6;
	}

	.el-menu-item {
		background-color: #0165a7 !important;
	}

	.el-menu-item:hover {
		background-color: #0268ac !important;
	}

	.el-submenu__title {
		background-color: #037bcb !important;
	}

	.el-submenu__title:hover {
		background-color: #0275c1 !important;
	}

	.left-top {
		height: 60px;
		color: #FFFFFF;
		flex-direction: row;
		display: flex;
		line-height: 60px;
		justify-content: center;
		align-items: center;
	}

	.mini-logo {
		width: 32px;
		height: 32px;
		margin-right: 10px;
		border-radius: 5px;
	}
</style>
